<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新增属性</title>
    <script src="__PUBLIC__/echarts/echarts.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <style>
        .delAttr,.delAttrValue{
            font-size: 20px;color: #ff5722;
        }
        .attrValueDIV{
            background-color: #eee;padding: 0 8px;
        }
        .addNewAttrValue{
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="layui-fluid main">
    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;border:0">
        <form class="layui-form" method="post" id="specsForm">
            <div class="layui-form-item" >
                <label class="layui-form-label">属性名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="attrName" autocomplete="off" value="" placeholder="请输入属性名" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">英文名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="attrEnName" autocomplete="off" value="" placeholder="请输入属性英文名" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" >
                <label class="layui-form-label">属性可选值</label>
                <div class="layui-input-inline" style="width:80%">
                    <blockquote class="layui-elem-quote elem-quote-div" id="attrValuesDIV" style="width: 80%">
                        <div id="attrValueDIV"></div>
                        <div class="layui-inline">
                            <div class="layui-inline">
                                <input type="text" name="newAttrValue" class="layui-input layui-input-inline" autocomplete="off">
                                <a class="layui-btn layui-btn-xs addNewAttrValue">添加</a>
                                </div>
                            </div>
                    </blockquote>
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <a class="layui-btn layui-btn-sm submitSpecs" >提交</a>
                </div>
            </div>
        </form>
    </fieldset>
</div>
</body>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.config({
        base : '__PUBLIC__/'
    }).extend({
        selectM: './layui_extends/selectM',
        selectN: './layui_extends/selectN',
    }).use(['layer','form','jquery','selectM','selectN','laydate','table'],function() {
        var layer = layui.layer;
        var form = layui.form;
        var selectM = layui.selectM;

        $(".submitSpecs").click(function () {
            //验证json串
            var attrName = $("input[name=attrName]").val();
            if(attrName=='' || attrName==undefined){layer.msg('请补充属性名称！');return false;}
            var attrEnName = $("input[name=attrEnName]").val();
            var attrs = $("#attrValueDIV .attrValueID");
            var attrValues = [];
            attrs.each(function(i,v){
                var attr_value = $(v).text();
                attrValues.push(attr_value);
            })
            if(attrValues.length < 1){layer.msg('请补充属性可选项！');return false;}
            var loading = layer.load(2);
            $.post("{:url('admin/hotel/addNewHotelAttr')}",{
                attrName:attrName
                ,attrEnName:attrEnName
                ,attrValues:attrValues
            },function (res) {
                layer.close(loading);
                layer.msg(res.msg);
                if(res.code > 0){
                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    },1500)
                }
            },'json')
            return false;
        })

        $(document).on('click','.addNewAttrValue',function () {
            var attrValue = $(this).prev().val();
            if(attrValue=='' || attrValue==undefined){return false;}
            var repeat = false;
            $('#attrValueDIV').find(".attrValueID").each(function(i,v){
                if($(v).text() == attrValue){repeat = true;layer.msg('请勿重复添加！');return false;}
            })
            if(repeat){return false;}
            var html = '<div class="layui-inline">' +
                '<div class="layui-inline attrValueID" data-id="">' + attrValue + '</div>' +
                '<i class="layui-icon delAttrValue" >&#x1006;</i>' +
                '</div>';
            $('#attrValueDIV').append(html);
        })
        $(document).on('click','.delAttrValue',function () {
            $(this).parent().remove();
        })
    });

</script>
</html>
